<template >
    <el-table :data="list" style="width: 100%" v-loading="loading">
        <el-table-column prop="proid" label="图片编号" width="200" />
        <el-table-column label="图片" width="100">
            <template #default="scope">
                <img class="img" :src="scope.row.img1" />
            </template>
        </el-table-column>
        <el-table-column prop="proname" label="名称" width="200"
            style="display: -webkit-box;text-overflow:ellipsis;width:200px;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;" />
        <el-table-column prop="brand" label="品牌" width="160" />
        <el-table-column prop="originprice" label="价格" width="80" />
        <el-table-column prop="discount" label="折扣" width="80" />
        <el-table-column prop="sales" label="销量" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
        <!-- <el-table-column prop="isrecommend" label="各个" width="10" /> -->
        <el-table-column label="是否推荐" prop="issale">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0"
                    @change="(val: string) => swits(val, scope.row.proid, 'isrecommend')" />
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background :page-size="params.limitNum" layout="prev, pager, next" :total="total"
        @current-change="ichange" />
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../until/service";

import { useRouteStore } from "../../../piniaStore/index"
const routeStore = useRouteStore();
let loading = ref(routeStore.loading)
interface IGoods {
    proid: string,
    category: string,
    brand: string,
    proname: string,
    originprice: number,
    sales: number,
    stock: number
    desc: string,
    issale: number,
    isrecommend: number,
    discount: number,
    isseckill: number,
    img1: string,
}
const params = reactive<{
    count: number,
    limitNum: number
}>({
    count: 1,
    limitNum: 5
})
const total = ref(0)
const list = reactive<IGoods[]>([]);
// 获取当前页面数据
const allIn = () => {
    loading.value = true
    service({
        url: '/pro/list',
        params
    }).then(res => {
        if (res.data.code === '200') {
            total.value = res.data.total
            list.length = 0
            list.push(...res.data.data)
            loading.value = false
        }
    })
}
const swits = (val: string, proid: string, type: string) => {
    // console.log(val, proid, type)s
    service({
        url: '/pro/updateFlag',
        method: 'post',
        data: {
            proid: proid,
            type: type,
            flag: val
        }
    }).then(res => {
        if (res.data.code === '200') {
      console.log('更新成功')

            // allIn()
        }
    })
}
allIn()
// 页面切换数据改变
const ichange = (value: number) => {
    params.count = value
    allIn()
}
</script>
<style scoped>
.img {
    width: 100px;
    height: 75px;
}
</style>